<style scoped lang="less">
    @import '../styles/user.css';
    @import '../styles/address.css';
</style>
<template>
    <header-component keep-alive :page-name="pageName"></header-component>

    <div id="page-address" class="page-wrap page-user">
        <div class="m-user m-user-addrList-manage">
            <div class="m-user-addrList">
                <div class="item default selected" v-for="(k,i) in addrList">
                    <div class="info">
                        <div class="name">{{i.consignee}}</div>
                        <div class="mobile">{{i.phone}}</div>
                        <div class="detail">{{i.province}}{{i.city}}{{i.area}} {{i.address}}</div>
                    </div>

                    <div class="editBar">
                        <div @click="setDefault(i.id)" :class="['m-user-link','dftTag', 'setDefault', i.default?'setDefaultStyle':'', 'underline']" :style="{color:i.default?'#ee2e3a !important':'color:#666 !important;'}" data-id="{{id}}" data-content="{{province}}:{{city}}:{{area}}:{{address}}::{{consignee}}:{{phone}}">
                            <template v-if="i.default">
                                已设为默认
                            </template>
                            <template v-else>
                                设为默认
                            </template>
                        </div>
                        <div class="edit underline" data-show="#addressForm" @click="showAddressPop($event,i)"><span></span>编辑</div>
                        <div class="remove removeAddress underline" @click="deleteAddress(i.id,$index)"><span></span>删除</div>
                        <input class="delete" type="hidden" name="addressId" value="{{id}}">
                    </div>
                </div>
                <!--没有收获地址-->
                <div class="w-more" v-if="addrList.length==0">暂无收货地址</div>
                <div class="w-more" v-if="addrList.length>0">没有更多了</div>
                <a href="javascript:;" class="m-simpleHeader-ok addAddress underline" id="addAddress" data-show="#addressForm" @click="showAddressPop($event)"><span></span>新增地址</a>
            </div>
        </div>
        <address-pop :status-address="statusAddress" :id="addrId" :province="province" :city="city" :district="district" :name="name" :phone="phone" :address="address"></address-pop>
    </div>

        <pop :status-toast="statusToast" :msg="msg" :status-pop="statusPop">
            <a href="javascript:;" @click="statusPop=false">确定</a>
        </pop>
</template>
<script>

    import headerComponent from '../components/header'
    import pop from '../components/pop'
    import addressPop from '../components/addressPop.vue'
    import User from '../module/user'
    export default {
        filters: {

        },

        directives: {

        },

        created(){

            this.$dispatch('isLoading',true)

        },

        data () {
            return {

                addrId:'',
                province:'',
                city:'',
                district:'',
                address:'',
                phone:'',
                name:'',
                statusAddress:false,
                statusToast:false,
                statusPop:false,
                msg:'',
                addrList:[],
                pageName:'管理收货地址'

            }
        },

        async ready () {

            await this.getAddressList();

            this.$dispatch('isLoading',false)
        },

        components:{

            headerComponent,
            pop,
            addressPop

        },

        beforeDestroy () {

        },

        methods: {

            async getAddressList(){

                let res = await User.getAddress();

                if (res.status == 200) {

                    this.addrList.splice(0,this.addrList.length);

                    if (!!res.data && !!res.data.item && res.data.item.length > 0) {

                        this.addrList.push(...res.data.item)

                    }

                }

            },

            showAddressPop(event,item={}){

                if (!!item.id) {

                    this.addrId = item.id;
                    this.province = item.province;
                    this.city = item.city;
                    this.district = item.area;
                    this.address = item.address;
                    this.name = item.consignee;
                    this.phone = item.phone

                } else {

                    this.addrId = ''
                    this.province = '';
                    this.city = '';
                    this.district = '';
                    this.address = '';
                    this.name = '';
                    this.phone = '';

                }

                this.statusAddress = true;

            },


            async deleteAddress(id,index){

                if (!!id) {

                    let res = await User.delAddress(id);

                    if (res.status == 200 && res.data.status) {

                        this.addrList.splice(index,1)

                    }

                }

            },

            async setDefault(id){

                let obj = {

                    id:id,
                    default:'Y',
                    token:User.token

                }

                let res = await User.updateAddress(obj)

                if (res.status == 200) {

                    this.getAddressList()

                } else {

                    console.log('a');

                    this.statusPop = true;

                    this.msg = res.msg

                }

            }

        },
        events:{

            updateAddressList(id){

                this.getAddressList()

            },

            showError(status,msg){

                this.statusPop = true;

                this.msg = msg

            }

        }


    }
</script>
